<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>睡眠中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">睡眠中心管理</h2>
        <div class="panel-body">
<!--            <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">-->
<!--                <div class="modal-dialog">-->
<!--                    <div class="modal-content animated bounceInRight">-->
<!--                        <div class="modal-header">-->
<!--                            <i class="fa fa-laptop modal-icon"></i>-->
<!--                            <h4 class="modal-title">登录</h4>-->
<!--                        </div>-->
<!--                        <div class="modal-body">-->
<!--                            <input id="username" type="text" name="username" class="form-control uname" placeholder="用户名"/>-->
<!--                            <input id="password" type="password" name="password" class="form-control pword" placeholder="密码"/>-->
<!--                        </div>-->
<!--                        <div class="modal-footer">-->
<!--                            <button type="button" class="btn btn-primary" id="radarLogin">登录</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="row" id="radars">
<!--                            <div class='col-sm-4'>-->
<!--                                <div class='ibox float-e-margins'>-->
<!--                                    <div class='ibox-title'>-->
<!--                                        <h4>默认面板</h4>-->
<!--                                        <div class='ibox-tools'>-->
<!--                                            <i class='badge badge-primary'>在线</i>-->
<!--                                            <i class='badge badge-danger'>离线</i>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="ibox-content">-->
<!--                                        <div class='panel-body'>-->
<!--                                            <div class='col-sm-8'>-->
<!--                                                <img src='https://sunfu.xdkdate.com/profile/radar.png'>-->
<!--                                            </div>-->
<!--                                            <div class="col-sm-4">-->
<!--                                                <label>心率：</label><input type='text' disabled='' class='form-control'>-->
<!--                                                <label>呼吸率：</label><input type='text' disabled='' class='form-control'>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class='col-sm-3'>-->
<!--                                <div class='panel panel-default' onclick='test()'>-->
<!--                                    <div class='panel-heading'>-->
<!--                                        默认面板2-->
<!--                                    </div>-->
<!--                                    <div class='panel-body'>-->
<!--                                        <img src='https://sunfu.xdkdate.com/profile/radar.png'>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    var userId = [[${userId}]];
    // $(document).ready(function(){
    //     $("#myModal").modal("show");
    // });
    // $("#radarLogin").click(function(){
    //     $.ajax({
    //         type: "post",
    //         dataType: "json",
    //         data: {
    //             username: $('#username').val(),
    //             password: $('#password').val()
    //         },
    //         url: "/common/radarLogin",
    //         // async : false,
    //         success: function (res) {
    //             if(res.code != 0){
    //                 $.modal.msgError(res.msg);
    //             }else{
    //                 // $.modal.msg(res.msg);
    //                 userId = res.data;
    //                 console.log(userId);
    //                 $("#myModal").modal("hide");
    //                 $.ajax({
    //                     type: "post",
    //                     dataType: "json",
    //                     data: {
    //                         userId: userId
    //                     },
    //                     url: "/common/queryRadarByUserId",
    //                     async : false,
    //                     success: function (res) {
    //                         if(res.code != 0){
    //                             $.modal.msgError(res.msg);
    //                         }else{
    //                             var html = "";
    //                             var radars = res.data;
    //                             if(!$.isEmptyObject(radars)){
    //                                 for (let i = 0; i < radars.length; i++) {
    //                                     var online = "<i class='badge badge-danger'>离线</i>";
    //                                     if(radars[i].online == "1"){
    //                                         online = "<i class='badge badge-primary'>在线</i>";
    //                                     }
    //                                     html += "<div class='col-sm-4'>" +
    //                                         "<div class='ibox float-e-margins' onclick='toRoomReport(\"" + radars[i].userId + "\",\"" + radars[i].deviceCode + "\")'>" +
    //                                         "<div class='ibox-title'>" +
    //                                         "<h5>" + radars[i].roomNum + "</h5>" +
    //                                         "<div class='ibox-tools' id='online-" + radars[i].deviceCode + "'>" +
    //                                         online +
    //                                         "</div>" +
    //                                         "</div>" +
    //                                         "<div class='ibox-content'>" +
    //                                         "<div class='panel-body'>" +
    //                                         "<div class='col-sm-8'>" +
    //                                         "<img src='https://sunfu.xdkdate.com/profile/radar.png'>" +
    //                                         "</div>" +
    //                                         "<div class='col-sm-4'>" +
    //                                         "<label>人体存在状态：</label><input id='someoneExists-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control' value='" + radars[i].someoneExists + "'>" +
    //                                         "<label>心率：</label><input id='heartRateValue-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
    //                                         "<label>呼吸率：</label><input id='breathValue-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
    //                                         "<label>睡眠状态：</label><input id='sleepStatus-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
    //                                         "<label>运动状态：</label><input id='motionStatus-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
    //                                         "</div>" +
    //                                         "</div>" +
    //                                         "</div>" +
    //                                         "</div>" +
    //                                         "</div>";
    //                                 }
    //                                 $('#radars').html(html);
    //                                 var stomp = null;
    //                                 var url = "https://sunfu.xdkdate.com/webSocket";
    //                                 // var url = "http://localhost:8009/webSocket"
    //                                 var socket = new SockJS(url);
    //                                 stomp = Stomp.over(socket);
    //                                 //连接
    //                                 stomp.connect({}, function (frame) {
    //                                     //订阅广播
    //                                     stomp.subscribe("/user/radars/message", function (res) {
    //                                         var obj = eval('('+res.body+')');
    //                                         if(obj.key == 'online'){
    //                                             if(obj.value == "1") {
    //                                                 document.getElementById(obj.key + "-" + obj.deviceCode).innerHTML = "<i class='badge badge-primary'>在线</i>";
    //                                             }else{
    //                                                 document.getElementById(obj.key + "-" + obj.deviceCode).innerHTML = "<i class='badge badge-danger'>离线</i>";
    //                                             }
    //                                         }else {
    //                                             var element = document.getElementById(obj.key + "-" + obj.deviceCode);
    //                                             if(!$.isEmptyObject(element)){
    //                                                 element.value = obj.value;
    //                                             }
    //
    //                                         }
    //                                     });
    //                                 });
    //                             }
    //                         }
    //                     }
    //                 });
    //             }
    //         }
    //     });
    // });
    $.ajax({
        type: "post",
        dataType: "json",
        data: {
            userId: userId
        },
        url: "/common/queryRadarByUser",
        async : false,
        success: function (res) {
            if(res.code != 0){
                $.modal.msgError(res.msg);
            }else{
                var html = "";
                var radars = res.data;
                if(!$.isEmptyObject(radars)){
                    for (let i = 0; i < radars.length; i++) {
                        var online = "<i class='badge badge-danger'>离线</i>";
                        if(radars[i].online == "1"){
                            online = "<i class='badge badge-primary'>在线</i>";
                        }
                        html += "<div class='col-sm-4'>" +
                            "<div class='ibox float-e-margins' onclick='toRoomReport(\"" + radars[i].userId + "\",\"" + radars[i].deviceCode + "\")'>" +
                            "<div class='ibox-title'>" +
                            "<h5>" + radars[i].roomNum + "</h5>" +
                            "<div class='ibox-tools' id='online-" + radars[i].deviceCode + "'>" +
                            online +
                            "</div>" +
                            "</div>" +
                            "<div class='ibox-content'>" +
                            "<div class='panel-body'>" +
                            "<div class='col-sm-8'>" +
                            "<img src='https://sunfu.xdkdate.com/profile/radar.png'>" +
                            // "<img src='https://www.bythealthy.com/sunfu/profile/radar.png'>" +
                            "</div>" +
                            "<div class='col-sm-4'>" +
                            "<label>人体存在状态：</label><input id='someoneExists-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control' value='" + radars[i].someoneExists + "'>" +
                            "<label>心率：</label><input id='heartRateValue-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
                            "<label>呼吸率：</label><input id='breathValue-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
                            "<label>睡眠状态：</label><input id='sleepStatus-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
                            "<label>运动状态：</label><input id='motionStatus-" + radars[i].deviceCode + "' type='text' disabled='' class='form-control'>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                    }
                    $('#radars').html(html);
                    var stomp = null;
                    var url = "https://sunfu.xdkdate.com/webSocket";
                    // var url = "https://www.bythealthy.com/sunfu/webSocket";
                    // var url = "http://localhost:8009/webSocket"
                    var socket = new SockJS(url);
                    stomp = Stomp.over(socket);
                    //连接
                    stomp.connect({}, function (frame) {
                        //订阅广播
                        stomp.subscribe("/user/radars/message", function (res) {
                            var obj = eval('('+res.body+')');
                            if(obj.key == 'online'){
                                if(obj.value == "1") {
                                    document.getElementById(obj.key + "-" + obj.deviceCode).innerHTML = "<i class='badge badge-primary'>在线</i>";
                                }else{
                                    document.getElementById(obj.key + "-" + obj.deviceCode).innerHTML = "<i class='badge badge-danger'>离线</i>";
                                }
                            }else {
                                var element = document.getElementById(obj.key + "-" + obj.deviceCode);
                                if(!$.isEmptyObject(element)){
                                    element.value = obj.value;
                                }

                            }
                        });
                    });
                }
            }
        }
    });
    function toRoomReport(userId,deviceCode){
        if(userId=="undefined" || userId=="" || userId==null) {
            $.modal.msgError("当前设备没绑定用户");
        }else{
            $(location).attr('href', 'https://sunfu.xdkdate.com/common/toRoomReport?userId=' + userId + '&deviceCode=' + deviceCode);
            // $(location).attr('href', 'https://www.bythealthy.com/sunfu/common/toRoomReport?userId=' + userId + '&deviceCode=' + deviceCode);
        }
    }
</script>
</body>
</html>
